<template>
  <Myhead title="搜索"></Myhead>
  <div class="search1">
    <van-search @search="search" @clear="clear" v-model="SearchTag" placeholder="请输入搜索关键词" />
    <!-- 有搜索结果 -->
    <div class="searchList" v-if="newarr1.length > 0">
      <div @click="goDetail(item)"  class="hot-recommend" v-for="item, index in newarr1" :key="index">
        <h2>
          {{ item.title }}
        </h2>
        <p>
          <van-icon name="chat-o">
            {{ item.address }}
          </van-icon>
        </p>

        <p class="time">
          <van-icon name="chat-o">
            {{ item.time }}
          </van-icon>
          <van-icon name="chat-o">
            热度 : {{ item.hot }}
          </van-icon>
        </p>
        <div class="lable">
          <van-tag v-for="tag, index in item.tags" :key="index" type="primary">
            {{ tag.label }}
          </van-tag>
        </div>
        <div v-for="v, i in item.imgs" :key="i">
          <div>
            <van-image @click="showImage(v, i)" class="recommend-image"
              :src="v.url.replace('public', 'http://81.69.235.62:3000')" />
          </div>
        </div>
        <div>
          <p>{{ item.content }}</p>
        </div>
        <div class="portrait">
          <van-image round width="80px" height="80px"
            src="https://img1.baidu.com/it/u=3306007571,1856425861&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1678294800&t=93b1149d3c01fb9a10c45e74d61ea49b" />
          <p>{{ item.author.username }}</p>
        </div>
      </div>
    </div>
    <!-- 搜索为空 -->
    <div class="empty" v-else>
      <van-empty image-size="180" image="error" description="请先搜索哦">

        关键词为 旅游标题和 分类
      </van-empty>
    </div>
    <div>
      <p>搜索记录</p>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { GetSearchAPI ,AddHotAPI} from '@/views/Home/homeapi'
import {useRouter} from "vue-router"

let router = useRouter()

// 获取数据列表
let SearchTag = ref('')
let searchList = ref([])
let GetSearchList = async () => {
  let res = await GetSearchAPI()
  if (res.data.code == 200) {
    searchList.value = res.data.result
  }
  console.log('searchList.value', searchList.value);
}


// 搜索
let newarr1 = ref([])
let search = (val) => {
  SearchTag.value = val
  console.log('SearchTag.value', SearchTag.value);
  let newarr = searchList.value.map((item) => {
    console.log('item', item);
    let newtags = JSON.parse(JSON.stringify(item.tags))
    let newtags2 = newtags.filter((item1) => { return item1.label == SearchTag.value })
    if (newtags2.length) {
      return item
    }
  })
  newarr1.value = newarr.filter((item) => {
    return item != undefined
  })

  console.log('newarr1', newarr1.value);
}

// 清楚搜索
let clear = () => {
  newarr1.value = []
}

let goDetail = async (item) => {
    console.log('item.id', item.hot);
    let id = item._id
    let hot = item.hot
    await AddHotAPI({
        _id: id,
        hot: hot + 99999999999999
    })
    router.push({
        name: 'particulars',
        query: {
            id: id
        }
    })
}

onMounted(() => {
  GetSearchList()
})
</script>

<style lang="scss" scoped>
.searchList {
  width: 100%;
  height: 500px;
  // background-color: red;

  .hot-recommend {
    width: 88%;
    margin-left: 9px;
    padding: 10px;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid red;

    p {
      margin-top: 10px;
    }

    

    .time {
      display: flex;
      justify-content: space-between;
    }

    .lable {
      .van-tag {
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
      }

      .recommend-image{
        img{
          width: 200px;
          height: 200px;
        }
      }
    }

    .row {
      margin-top: 40px;
      margin-left: 10px;
      font-size: 16px;
      
    }
  }

}</style>